<template>
  <div class="player-wrap">
    <div class="player-content">
      <div class="header">
        <div class="left" @click="$router.go(-1)">
          <i class="iconfont icon-zuo"> </i>
        </div>
        <div class="right">
          <i class="iconfont icon-touping"></i>
          <i class="iconfont icon-diandiandianshu"></i>
        </div>
      </div>
      <video
        class="video"
        id="videoPlayer"
        :src="url"
        playsinline
        webkit-playsinline
        :poster="poster | formatImage(posterSize)"
        controls
      ></video>
      <div class="overlay">
        <div class="controls">
          <img
            v-if="posterVisible"
            class="poster"
            :src="poster | formatImage(posterSize)"
            @click="toggle"
          />
          <span v-if="posterVisible" class="duration" @click="toggle">{{
            duration | formatTime
          }}</span>
          <div
            class="control"
            v-show="!playing"
            :class="{ active: !posterVisible }"
            @click="toggle"
          >
            <i class="fa fa-play"></i>
          </div>
          <div
            class="control"
            v-show="playing"
            :class="{ active: !posterVisible }"
            @click="toggle"
          >
            <i class="fa fa-pause"></i>
          </div>
        </div>
      </div>
    </div>
    <div v-if="!canPlay" class="player-mask" v-html="maskInfo"></div>
  </div>
</template>

<script>
import { formatImage, formatTime } from '@/filters/filters.js'

export default {
  name: 'VideoPlayer',
  props: {
    videoInfo: {
      type: Object
    },
    url: {
      type: String
    },
    poster: {
      type: String
    },
    posterSize: {
      type: String,
      default: '@480w_270h'
    },
    duration: {
      type: [Number, String]
    },
    canPlay: {
      type: Boolean,
      default: true
    },
    maskInfo: {
      type: String
    }
  },
  data () {
    return {
      videoCtx: null,
      playing: false,
      posterVisible: true,
      videoTime: 0,
      clockTime: null,
      onePlay: false
    }
  },
  filters: {
    formatImage,
    formatTime
  },
  mounted () {
    this.videoCtx = document.querySelector('#videoPlayer')
    // 监听播放开始
    this.videoCtx.addEventListener('play', () => {
      console.log('开始播放')
      console.log(this.videoInfo)
      this.clockTime = setInterval(() => {
        fn()
      }, 3000)
      const fn = play => {
        this.time++
        const obj = {
          type: sessionStorage.dataNum,
          messageType: 1,
          videoId: this.videoInfo.bvid,
          videoName: this.videoInfo.title
        }
        if (!this.onePlay) obj.play = 0
        this.onePlay = true
        this.$emit('soketSend', obj)
      }
      fn()
    })
    // 监听播放结束
    this.videoCtx.addEventListener('pause', () => {
      if (this.clockTime) clearInterval(this.clockTime)
      console.log('播放暂停')
    })
    // 监听播放结束
    this.videoCtx.addEventListener('ended', () => {
      if (this.clockTime) clearInterval(this.clockTime)
      console.log('播放结束')
    })
  },
  beforeDestroy () {
    this.videoCtx.pause()
  },
  methods: {
    toggle () {
      if (this.playing) {
        this.videoCtx.pause()
        this.$emit('pause')
      } else {
        this.videoCtx.play()
        this.posterVisible = false
        this.$emit('play')
      }
      this.playing = !this.playing
    }
  }
}
</script>

<style lang="scss" scoped>
.player {
  &-wrap {
    position: relative;
    padding-top: 270/480 * 100%;
    background: {
      color: $color-grey;
      size: 36%;
      image: url("~@/assets/placeholder.png");
      repeat: no-repeat;
      position: 50%;
    }
  }
  &-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .header {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: rem(30px);
      align-items: center;
      justify-content: space-between;
      z-index: 11;
      color: #fff;
      box-sizing: border-box;
      padding: 0 rem(10px);
      i {
        font-size: rem(24px);
        margin: 0 rem(3px);
      }
    }
    .video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
    .overlay {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      user-select: none;
      transform: translateZ(0);
    }
    .controls {
      display: block;
      position: absolute;
      z-index: 3;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: hidden;
      cursor: pointer;
      text-align: center;
      .poster {
        display: block;
        width: 100%;
        height: 100%;
      }
      .duration {
        position: absolute;
        left: rem(10px);
        bottom: rem(15px);
        z-index: 2;
        display: block;
        border: 1px solid rgba(255, 255, 255, 0.6);
        background-color: rgba(255, 255, 255, 0.2);
        padding: {
          left: rem(8px);
          right: rem(8px);
        }
        color: #fff;
        font-size: rem(12px);
        line-height: rem(20px);
        text-align: center;
        border-radius: rem(2px);
      }
      .control {
        position: absolute;
        right: rem(10px);
        bottom: rem(10px);
        z-index: 2;
        color: #fff;
        .fa {
          font-size: rem(40px);
        }
        text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.5);
        &.active {
          opacity: 0.5;
          bottom: rem(28px);
        }
      }
    }
  }
  &-mask {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: rem(14px);
    width: 100%;
    height: 100%;
    color: $color-white;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
</style>
